<template>
  <q-page
    :style-fn="pageStyle"
    class="fui"
  >
    <div class="bg fit">
      <div class="stripe fit absolute"></div>
      <div class="dot fit absolute"></div>
    </div>
    <div class="content fit row">
      <div class="col nav">
        <div class="line"></div>
        <div class="container light">HEXO</div>
        <div class="line"></div>
        <div class="container">
          好像最喜欢的是花两元坐公交车 坐在最后一排靠窗戴着耳机 听着网易云 看着窗外倒退的风景 想着过去和现在
        </div>
        <div class="line"></div>
        <div class="container">
          好像最喜欢的是花两元坐公交车 坐在最后一排靠窗戴着耳机 听着网易云 看着窗外倒退的风景 想着过去和现在
          好像最喜欢的是花两元坐公交车 坐在最后一排靠窗戴着耳机 听着网易云 看着窗外倒退的风景 想着过去和现在
        </div>
        <div class="line"></div>
        <div class="container">
          好像最喜欢的是花两元坐公交车 坐在最后一排靠窗戴着耳机 听着网易云 看着窗外倒退的风景 想着过去和现在
          好像最喜欢的是花两元坐公交车 坐在最后一排靠窗戴着耳机 听着网易云 看着窗外倒退的风景 想着过去和现在
          好像最喜欢的是花两元坐公交车 坐在最后一排靠窗戴着耳机 听着网易云 看着窗外倒退的风景 想着过去和现在
          好像最喜欢的是花两元坐公交车 坐在最后一排靠窗戴着耳机 听着网易云 看着窗外倒退的风景 想着过去和现在
          好像最喜欢的是花两元坐公交车 坐在最后一排靠窗戴着耳机 听着网易云 看着窗外倒退的风景 想着过去和现在
          好像最喜欢的是花两元坐公交车 坐在最后一排靠窗戴着耳机 听着网易云 看着窗外倒退的风景 想着过去和现在
          好像最喜欢的是花两元坐公交车 坐在最后一排靠窗戴着耳机 听着网易云 看着窗外倒退的风景 想着过去和现在
          好像最喜欢的是花两元坐公交车 坐在最后一排靠窗戴着耳机 听着网易云 看着窗外倒退的风景 想着过去和现在
        </div>
        <div class="line"></div>
        <div class="line bottom"></div>
      </div>
      <div class="col list">
        <div class="line"></div>
        <template v-for="(item,key) in new Array(1)">
          <div
            class="container"
            :key="key"
          >
            好像最喜欢的是花两元坐公交车 坐在最后一排靠窗戴着耳机 听着网易云 看着窗外倒退的风景 想着过去和现在
          </div>
          <div
            class="line"
            :key="key"
          ></div>
        </template>
        <div class="line bottom"></div>
      </div>
    </div>
  </q-page>
</template>

<script>
// inspired by
// https://www.behance.net/gallery/81950543/TEDx-Sydney-2019-Titles
export default {
  name: 'FUI',
  methods: {
    pageStyle (offset, height) {
      return 'height:' + (window.innerHeight - offset) + 'px'
    }
  }
}
</script>
<style lang="scss" scoped>
$primary: #4ea0e3;
$dk: darken($primary, 55%);
$lt: lighten($primary, 25%);
.bg {
  background-color: $dk;
  position: absolute;
  .stripe {
    height: 2px;
    background-image: linear-gradient(rgba(#000, 0.2) 50%, rgba(#000, 1) 50%);
    background-size: 100% 4px;
  }
  .dot {
    background-image: radial-gradient(
      circle,
      rgba(#fff, 0.3) 1px,
      transparent 1px
    );
    background-size: 75px 75px;
  }
}
.container {
  padding: 10px;
  transition: 0.1s;
  &:hover {
    color: $lt;
  }
  &.light {
    color: $lt;
  }
}
.content {
  position: absolute;
  font-family: "Titillium Web", "Helvetica Neue", Helvetica, Arial,
    "Microsoft Yahei", sans-serif;
  user-select: none;
  color: rgba($lt, 0.5);
  .nav {
    position: relative;
    max-width: 350px;
    margin: 20px;
    width: 0;
  }
  .list {
    position: relative;
    margin: 20px;
  }
}
.line {
  position: absolute;
  height: 1px;
  width: 100%;
  background-color: rgba($lt, 0.3);
  &.no-line {
    background-color: transparent;
  }
  &.bottom {
    bottom: 0;
  }
  &::before {
    content: "";
    width: 3px;
    height: 3px;
    background-color: rgba($lt, 0.3);
    position: absolute;
    left: -1px;
    top: -1px;
  }
  &::after {
    content: "";
    width: 3px;
    height: 3px;
    background-color: rgba($lt, 0.3);
    position: absolute;
    right: -1px;
    top: -1px;
  }
  &.no-start::before {
    background-color: transparent;
  }
  &.no-end::after {
    background-color: transparent;
  }
}
</style>
